import React, { useState } from 'react';
import './HotTabs.css';

const tabs = [
  { key: 'hot', label: '热门推荐' },
  { key: 'new', label: '最新上传' },
  { key: 'used', label: '最多使用' },
];

interface HotTabsProps {
  value: string;
  onChange: (key: string) => void;
}

export default function HotTabs({ value, onChange }: HotTabsProps) {
  const [active, setActive] = useState(value || 'hot');
  const handleTab = (key: string) => {
    setActive(key);
    onChange(key);
  };
  return (
    <div className="hot-tabs">
      {tabs.map(tab => (
        <span
          key={tab.key}
          className={active === tab.key ? 'hot-tab active' : 'hot-tab'}
          onClick={() => handleTab(tab.key)}
        >
          {tab.label}
        </span>
      ))}
    </div>
  );
} 